<template>
  <div class="banner">
    TimeLine
  </div>
  <br>
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12">

      <el-timeline>
        <el-timeline-item
            type="primary"
            size="large"
            placement="top"
            :timestamp="dateFormat"
        >
          <span style="font-size: 1.1em;">累计{{ total }}篇文章</span>
        </el-timeline-item>

        <el-timeline-item
            v-for="(blog, index) in blogs"
            :key="index"
            type="primary"
            size="large"
            placement="top"
            :hollow="true"
            :timestamp="blog.createTime"
        >
          <el-card>
            <template #header>
              <a :href="'/article/'+blog.blogId"
                 style="font-size: 1.3em;font-weight: bolder;color: #044b46">{{ blog.blogTitle }}</a>
            </template>
            <!-- 正文摘要 -->
            <el-link :href="'/categories/'+blog.blogCategoryId">
              <el-icon>
                <Files/>
              </el-icon>
              {{ blog.blogCategoryName }}
            </el-link>

            <!--标签-->
            <el-icon style="margin-left: 40px">
              <Discount/>
            </el-icon>&nbsp;
            <template v-for="(tag,index) in blog.tags">
              <template v-if="index > 0" :key="tag.tagId"> &nbsp;|&nbsp;</template>
              <a :href="'/tag/'+tag.tagId" :style="{color:tag.tagColor}">{{ tag.tagName }}</a>
            </template>
            <hr style="border: 1px solid #eeeeee;">
            <!--文章摘要-->
            <div class="article-content">{{ blog.blogAbstract }}</div>

          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-divider></el-divider>
      <!--分页-->
      <div style="display: flex;">
        <el-pagination
            v-model:current-page="current"
            v-model:page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            :small="true"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin: auto;"
        />
      </div>


    </el-col>
    <el-col :span="6"></el-col>
  </el-row>


</template>

<script>
export default {
  name: "TimeLine",
  computed: {
    dateFormat() {
      let ret;
      let fmt = "YYYY年mm月dd日 HH:MM:SS"
      let date = new Date()
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
      }
      return fmt;
    }
  },
  created() {
    this.init()
  },
  data() {
    return {
      blogs: [],
      total: 0,
      current: 1,
      size: 10,
    }
  },
  methods: {
    async init() {
      let {data: result} = await this.$http.get("/api/blog/timeline", {
        params: {
          pageSize: this.size,
          pageNum: this.current,
        }
      })
      console.log(result)
      this.total = result.dataMap.page.total
      this.current = result.dataMap.page.current
      this.size = result.dataMap.page.size
      this.blogs = result.dataMap.page.records
    },
    // 分页大小改变
    handleSizeChange() {
      this.init()
    },
    // 分页页数改变
    handleCurrentChange() {
      this.init()
    },
  }
}
</script>

<style scoped>
.banner {
  background-image: url('/headImg/timeline.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}

a {
  /*color: #036b67;*/
  text-decoration-line: none;
  margin-bottom: 10px;
  font-size: 1em;
}

.article-content {
  margin-top: 15px;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>